<template>
    <div class="content">
      <el-container>
        <el-header height="40px">
          <el-page-header @back="goBack"  style="margin-top: 10px"></el-page-header>
        </el-header>
      </el-container>
      <div class="text">请先选择身份哦🥰🥰</div>
        <div class="registerType">
            <el-button type="warning" size="large" plain icon="el-icon-edit" @click="toUser">我是顾客</el-button>
           <el-button type="warning" icon="el-icon-share" @click=toRider>我是骑手</el-button>
            <el-button type="warning" plain icon="el-icon-share" @click=toShopManager>我是店家</el-button>
        </div>
    </div>


</template>

<script>
    export default {
        name: "RegisterType",
        methods:{
            toUser(){
                this.$router.replace('/toUserRegister');
            },

            toRider(){
                this.$router.replace('/toRiderRegister');
            },

            toShopManager(){
                this.$router.replace('/toShopManagerRegister');
            },

            goBack(){
                this.$router.replace('/')
            }
        }
    }
</script>

<style scoped>
.content {
  /*background-color: #009be2;*/
  background: url(../../public/upload/img3.jpg) no-repeat;
  background-size: cover;
  height: 100vh;
}
.text {
  position: absolute;
  top: 100px;
  right: 41%;
  font-size: 36px;
  color: #000000;
  font-weight: 600;
}
    .el-button{
      width: 300px;
      height: 150px;
      border-radius: 50px;
      font-size: 30px;
    }
    .register {
      text-align: center;
      /*margin-top: 100px;*/
    }

    .registerType{
      width: 700px;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      margin: 250px auto;
      padding:auto 60px;
}
</style>
